<template>
	<div>
		<div class="article-main" v-for="(item, index) in blogList" :key="index">
			<div class="article-item">
				<div class="article-title">
					<a href="#">
            <span>
              <router-link
								:to="{ name: 'BlogDetail', params: { blogId: item.id } }"
								target="_blank"
							>
                {{ item.title }}
              </router-link>
            </span>
					</a>
				</div>
				<div class="article-content-item">
					<div class="article-img-left" v-if="item.coverImage!=null&&item.coverImage.trim().length>10">
						<router-link
							:to="{ name: 'BlogDetail', params: { blogId: item.id } }"
							target="_blank"
						>
							<img :src="item.coverImage" alt=""/>
						</router-link>
					</div>
					<div class="article-content-right">
						<router-link
							:to="{ name: 'BlogDetail', params: { blogId: item.id } }"
							target="_blank"
						>
							<div class="article-content">
								{{ item.description }}
							</div>
						</router-link>
						<div class="article-evaluation">
							<div class="article-good" @click="addLikeNum(item.actionStatus.like,item.id, index)">
								<!--登录显示-->
								<img
									:src="
                    item.actionStatus.like
                      ? require('../../../assets/img/home/good_active.png')
                      : require('../../../assets/img/home/good.png')
                  "
									alt=""
								/>
								{{ item.likeNum }} <span>赞</span>
							</div>
							<div class="article-author">
								作者：<span>{{ item.authorName }}</span>
							</div>
							<div class="article-date">
								发布时间：<span>{{ item.releaseTime }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--infinite-loading这个组件要放在列表的底部，滚动的盒子里面-->
		<infinite-loading
			spinner="spiral"
			@infinite="infiniteHandler"
			:distance="200"
			class="infinite-loading-wrap"
		>
			<div slot="spinner">加载中...</div>
			<div slot="no-more">暂无更多数据</div>
			<div slot="no-results">No results Data</div>
			<div slot="error" slot-scope="{ trigger }">
				Error Data, click
				<a href="javascript:;" @click="trigger">here</a> toretry
			</div>
		</infinite-loading>
	</div>
</template>

<script>
import qs from "qs";

import InfiniteLoading from "vue-infinite-loading";

export default {
	name: "",
	data() {
		return {
			page: 1,
			blogList: [],
			blogIdForm: {
				blogId: "",
			},
			isLike: false,
			isShowImg: true,
		};
	},
	components: {
		InfiniteLoading,
	},
	mounted() {
	},
	computed: {},
	methods: {
		// 点赞
		addLikeNum(isLike, id, index) {
			this.blogIdForm.blogId = id;
			this.$axios
				.post("/blog/action/like", qs.stringify(this.blogIdForm), {
					headers: {token: localStorage.getItem("token")},
				})
				.then((res) => {
					console.log(res);
					if (res.data.code === 402 && res.data.status === false) {
						this.$message({
							showClose: true,
							message: "请先登录哦~",
							type: "warning",
						});
					}
					if (res.data.code === 200 && res.data.status === true) {
						if (isLike) {
							this.blogList[index].likeNum--;
							this.blogList[index].actionStatus.like = false;
						} else {
							this.blogList[index].likeNum++;
							this.blogList[index].actionStatus.like = true;
						}
					}
				});
		},
		async infiniteHandler($state) {
			this.$axios
				.get("/blog/list/new?page=" + this.page, {
					headers: {token: localStorage.getItem("token")},
				})
				.then((res) => {
					if (res.data.data.records.length) {
						this.page += 1; // 下一页
						this.blogList = this.blogList.concat(res.data.data.records);
						console.log(this.blogList);
						$state.loaded();
					} else {
						$state.complete();
					}
				});
		},
	},
};
</script>

<style scoped>
.article-main {
	border-radius: 5px;
	margin-right: 15px;
	margin-left: 3px;
	/* border-bottom: 1px solid #f0f0f2; */
	background-color: #ffffff;
	padding: 15px 15px 0 15px;
	margin-bottom: 15px;

	/* display: inline-block; */
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: box-shadow, transform;
	transition-property: box-shadow, transform;
}

.article-main:hover {
	background-color: #fafafa;

	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
}

.article-title a {
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 700;
	color: #222226;
	overflow: hidden;
	white-space: normal;
	word-break: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-height: 25px;
}

.article-title a span:hover {
	/*color: pink;*/
	text-decoration: underline;
}

.article-img-left {
	margin-right: 16px;
}

.article-img-left a {
	position: relative;
	border-radius: 2px;
	/*width: 134px;*/
	height: 84px;
	display: inline-block;
	background-position: 50%;
	border: 1px solid #f5f6f7;
	overflow: hidden;
	background: #f5f6f7;
	/*background-image: url("../../../assets/img/home/003.jpg");*/
	background-size: cover;
}

.article-img-left img {
	width: 132px;
	height: 100px;
	object-fit: cover;
}

/*图片文章并排显示*/
.article-content-item {
	display: flex;
	padding-bottom: 15px;
	height: 130px;
}

.article-content-right {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	/*margin-top: 4px;*/
	font-size: 14px;
	font-weight: 400;
	min-height: 6px;
	min-height: 40px;
	color: #555666;
}

.article-content-right .article-content {
	color: #555666;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

/*评价*/
.article-evaluation {
	display: flex;
	align-items: center;
}

.article-evaluation img {
	width: 16px;
	height: 16px;
	margin-right: 3px;
}

.article-evaluation .article-good {
	display: flex;
	align-items: center;
	margin-right: 30px;
}

.article-evaluation .article-author {
	margin-right: 30px;
}
</style>
